<template>
    <div class="component-outside-content">
      <div class="content-title" :style="{ flexDirection: treemapData?.typeList?.length > 3 ? 'row' : '' }">
        <span style="margin-right: 5px;">{{ treemapData?.title }}</span>
        <div class="content-title-right" :style="{ flexDirection: treemapData?.typeList?.length > 3 ? 'column' : '' }">
          <el-row :gutter="4" v-for="rowItem of Math.ceil(treemapData?.typeList?.length / 3)" :key="rowItem" :style="{ marginTop: rowItem !== 1 ? '10px' : '' }">
            <el-col :span="treemapData?.typeList?.length > 3 ? 8 : 24 / treemapData?.typeList?.length"
                    v-for="(colItem, index) of treemapData?.typeList?.filter((x, i) => rowItem === 1 ? i < 3 : i > 2)"
                    :key="index">
              <div class="content-title-item">
                <div :style="{backgroundColor: colItem.color}"></div>
                <div style="white-space: nowrap; overflow: visible">{{ colItem.label }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="content-sum" :style="{marginTop: treemapData?.typeList?.length > 3 ? '' : '24px'}">
        <span>{{ treemapData?.sumTitle }}：{{
          treemapData?.sumAcreage
        }}万m²
        </span>
        <div style="display: flex; align-items: center">
          <span class="triangle" :class="{ 'triangle-reverse': treemapData?.sumPercentage > 0 }"></span>
          <span
            :style="{ color: treemapData?.sumPercentage > 0 ? '#01FEFF' : '#E13535' }">{{
            Math.abs(treemapData?.sumPercentage)
          }}%</span>
          <span>&nbsp;同比上年</span>
        </div>
      </div>
      <div v-if="treemapData?.sumAcreage" ref="echartDom" :class="$attrs.class"></div>
    </div>
  </template>
  
  <script setup>
  import {ref, defineProps, onMounted, onUnmounted, inject, shallowRef, defineOptions, defineExpose} from 'vue'
  import { pxToRem } from "@/utils/index";
  
  const props = defineProps({
    treemapData: {
      type: Object,
      default: () => {
      }
    }
  });
  
  defineOptions({
    inheritAttrs: false
  })
  
  const echartDom = ref(null);
  const myChart = shallowRef(null);
  const echarts = inject('echarts');
  
  const initEchart = () => {
    if (echartDom.value) {
      myChart.value = echarts.init(echartDom.value);
      let option = {
        series: [
          {
            type: 'treemap',
            layout: 'orthogonal',
            roam: false,
            nodeClick: false,
            width: '100%',
            height: '100%',
            label: {
              fontSize: pxToRem(9)
            },
            levels: [
              {
                itemStyle: {
                  gapWidth: 5,
                  borderColor: '#052342'
                }
              },
              {
                itemStyle: {
                  gapWidth: 5,
                  borderColor: '#052342'
                }
              }
            ],
            data: props?.treemapData?.seriesData,
            breadcrumb: {
              show: false //隐藏底部导航条
            }
          }
        ],
        tooltip: {
          formatter: (info) => {
            const tempClass = info?.data?.areaTb
                ? info?.data?.areaTb > 0 ? 'triangle-reverse' : ''
                : props?.treemapData?.sumPercentage > 0 ? 'triangle-reverse' : ''
            const tempColor = info?.data?.areaTb
                ? info?.data?.areaTb > 0 ? '#01FEFF' : '#E13535'
                : props?.treemapData?.sumPercentage > 0 ? '#01FEFF' : '#E13535'
            return `<p>${info?.data?.property || '总'}面积：${info?.data?.area || props?.treemapData?.sumAcreage }万㎡</p>
                  <p>占比：${info?.data?.areaZb || '100'}%</p>
                  <div style="display: flex; align-items: center"><div class="triangle ${tempClass}" :class="{ 'triangle-reverse': ${info?.data?.areaTb > 0} }"></div><span style="color: ${tempColor}">${Math.abs(info?.data?.areaTb) || Math.abs(props?.treemapData?.sumPercentage)}%</span>&nbsp;同比上年</div>`
          }
        }
      };
      option && myChart.value.setOption(option, true);
    }
  }
  
  const updateChart = () => {
    if (myChart.value) {
      myChart.value.dispose(); // 销毁旧图表实例
    }
    initEchart();
  };
  
  defineExpose({
    updateChart
  })
  
  onMounted(() => {
    initEchart();
    window.addEventListener("resize", updateChart);
  })
  
  onUnmounted(() => {
    window.removeEventListener("resize", updateChart);
  })
  
  </script>
  
  <style scoped lang="less">
  .content-title {
    display: flex;
    justify-content: space-between;
  
    > span {
      font-size: 14px;
      margin-bottom: 8px;
    }
  
    .content-title-right {
      display: flex;
      flex: 1;
      justify-content: flex-end;
  
      .el-row {
        width: 100%;
      }
  
      .content-title-item {
        display: flex;
        align-items: center;
  
        > div:first-child {
          width: 10px;
          height: 10px;
          margin-right: 2px;
          flex-shrink: 0;
        }
  
        > div:last-child {
          font-size: 11px;
        }
      }
  
      .content-title-item:not(:last-child) {
        margin-right: 10px;
      }
    }
  }
  
  .content-sum {
    width: 100%;
    background-color: rgba(8, 170, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 3px 5px 3px 12px;
    font-size: 12px;
    margin: 9px 0 8px;
  }
  .h156 {
    height: 156px;
  }
  .h174 {
    height: 174px;
  }
  </style>